<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { createAuth } from '@/api/auth.js'

const router = useRouter()
const toLogin = () => {
  router.push({ name: 'Login' })
}
onMounted(() => {
  // 获取表单元素
  const form = document.querySelector('form')
  // 监听表单的提交事件
  form.addEventListener('submit', function (event) {
    // 阻止表单的默认提交行为
    event.preventDefault()
    // 获取表单中的各个字段
    const username = document.getElementById('username').value
    const password = document.getElementById('password').value
    createAuth({
      username,
      password
    })
      .then((res) => {
        console.log(res)
          // {
          //     "name": "BadRequest",
          //     "message": "insert into \"auth\" (\"password\", \"username\") values ($1, $2) returning \"id\" - null value in column \"id\" of relation \"auth\" violates not-null constraint",
          //     "code": 400,
          //     "className": "bad-request"
          // }
          // {
          //     "id": "531c4da1-fec8-44f4-87a2-aefb1d8cab2f",
          //     "email": null,
          //     "username": "123"
          // }
          // {
          //     "name": "NotAuthenticated",
          //     "message": "Invalid login",
          //     "code": 401,
          //     "className": "not-authenticated"
          // }
      })
      .catch((err) => {
        console.log(err)
      })
  })
})
</script>

<template>
  <div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-lg">
      <h1 class="text-center text-2xl font-bold text-indigo-600 sm:text-3xl">欢迎注册bobo地图</h1>

      <p class="mx-auto mt-4 max-w-md text-center text-gray-500">
        立即注册，开始您的地理信息数据处理与共享之旅。我们的平台致力于为您提供最优质的服务，让您的工作更加高效和便捷。
      </p>

      <form action="#" class="mb-0 mt-6 space-y-4 rounded-lg p-4 shadow-lg sm:p-6 lg:p-8">
        <p class="text-center text-lg font-medium">注册新的帐户</p>
        <div>
          <label for="email" class="sr-only">Email</label>
          <div class="relative">
            <input
              type="tel"
              id="username"
              name="username"
              class="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
              placeholder="请输入手机号码"
            />
            <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4 text-gray-400"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
                />
              </svg>
            </span>
          </div>
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <div class="relative">
            <input
              id="password"
              name="password"
              type="password"
              class="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
              placeholder="请输入密码"
            />
            <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4 text-gray-400"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                />
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                />
              </svg>
            </span>
          </div>
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <div class="relative">
            <input
              type="password"
              class="w-full rounded-lg border-gray-200 p-4 pe-12 text-sm shadow-sm"
              placeholder="请确认密码"
            />
            <span class="absolute inset-y-0 end-0 grid place-content-center px-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4 text-gray-400"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                />
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                />
              </svg>
            </span>
          </div>
        </div>
        <button
          type="submit"
          class="block w-full rounded-lg bg-indigo-600 px-5 py-3 text-sm font-medium text-white"
        >
          立即注册
        </button>
        <p class="text-center text-sm text-gray-500">
          已有账号？
          <a class="underline" @click="toLogin">去登录</a>
        </p>
      </form>
    </div>
  </div>
</template>

<style scoped></style>
